<template>
  <view class="notice-details">
    <view class="cont">{{ noticeDetail.title || '无' }}</view>
    <view class="date-see flex-row">
      <view class="date">发布于：{{ noticeDetail.create_at || '无' }}</view>
      <view class="see flex-row">
        <text class="iconfont icon-see"></text>
        {{ noticeDetail.browse_count || 0 }}
      </view>
    </view>
    <view class="rich-text-box">
      <rich-text
        v-if="noticeDetail.content"
        :nodes="noticeDetail.content"
      ></rich-text>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import { fetchNewsDetails } from '@/api'

const noticeDetail = ref({
  title: '',
  create_at: '',
  browse_count: 0,
  content: ''
})

onLoad(e => {
  fetchNewsDetails(+e?.id).then(res => (noticeDetail.value = res))
})
</script>

<style scoped lang="scss">
.notice-details {
  padding: 30rpx;
}
.cont {
  color: #333;
  font-size: 34rpx;
  font-weight: bold;
}
.date-see {
  color: #b1b1b1;
  font-size: 24rpx;
  padding-top: 20rpx;
  .icon-see {
    margin-right: 6rpx;
  }
}
.rich-text-box {
  padding-top: 40rpx;
  img {
    border-radius: 20rpx;
  }
}
</style>
<style>
page {
  background-color: #fff;
}
</style>
